<template>
  <div id="goods">
    <!-- 左侧菜单 -->
    <div class="left-menu" id="leftMenu">
      <ul>
        <li
          v-for="good in goods"
          :key="good.name"
          class="left-menu-item"
          @click="handleSelectMenu(good.name)"
          :class="{ active: active === good.name }"
        >
          {{ good.name }}
        </li>
      </ul>
    </div>
    <!-- 右侧商品 -->
    <div class="right-content" id="rightContent">
      <div>
        <div
          :id="good.name"
          v-for="good in goods"
          :key="good.name"
          class="right-content-item"
        >
          <h3 class="title">{{ good.name }}</h3>
          <div v-for="food in good.foods" :key="food.id" class="item">
            <img
              class="img"
              :src="food.imgUrl"
              alt=""
              @click="handleShowGoodInfo(food)"
            />
            <div class="info">
              <h4 class="name" @click="handleShowGoodInfo(food)">
                {{ food.name }}
              </h4>
              <div class="desc">{{ food.goodsDesc }}</div>
              <div class="rate">
                月售{{ food.sellCount }}份 好评率{{ food.rating }}%
              </div>
              <div class="price">￥{{ food.price }}</div>
              <van-stepper
                class="control"
                min="0"
                v-model="food.count"
                theme="round"
                button-size="22"
                disable-input
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品详情弹层 -->

    <transition name="slide">
      <div v-show="flag" class="good-info">
        <i @click="handleCloseMask" class="iconfont icon-shanchu"></i>
        <img class="imgs" :src="info.imgUrl" alt="" />
        <!-- 关闭弹层按钮 -->
        <div class="contentId">
          <div class="conter-top">
            <h3 class="name">{{ info.name }}</h3>
            <p class="rate">
              月售{{ info.sellCount }}份 好评率{{ info.rating }}%
            </p>
            <p class="price">￥{{ info.price }}</p>
            <button class="btn">加入购物车</button>
          </div>
          <div class="blank"></div>
          <div class="conter-botton">
            <div class="above">
              <h3>商品介绍</h3>
              <p>{{ info.goodsDesc }}</p>
            </div>
            <div class="under">
              <button>全部 3</button>
              <button>推荐 2</button>
              <button>吐槽 1</button>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
  name: "goods",
  props: {
    goods: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      active: '新品专享',
      hArr: [],
      flag: false, // 是否显示商品详情弹层
      info: {}, // 商品详情弹层的数据
    }
  },
  watch: {
    goods () {
      this.initScroll() // 初始化
      this.handleCalcHeight() // 计算高度
    }
  },
  mounted () {
    this.initScroll() // 初始化
    this.handleCalcHeight() // 计算高度
  },
  methods: {
    // 初始化better-scroll
    initScroll () {
      setTimeout(() => {
        let leftMenu = document.querySelector('#leftMenu')
        this.bs1 = new BScroll(leftMenu, {
          click: true
        })
        let rightContent = document.querySelector('#rightContent')
        this.bs2 = new BScroll(rightContent, {
          probeType: 3, // 派发滚动事件
          click: true // 派发点击事件
        })
        // 监听右侧商品内容区域的滚动事件，获取相应坐标
        this.bs2.on('scroll', (pos) => {
          let y = Math.abs(pos.y) // 拿到滚动的纵坐标
          this.hArr.forEach(item => {
            if (item.min <= y && item.max > y) {
              this.active = item.title
            }
          })
        })
      }, 500)
    },
    // 计算每个分类的高度坐标
    handleCalcHeight () {
      setTimeout(() => {
        let total = 0
        this.goods.forEach(item => {
          let h = document.getElementById(item.name).offsetHeight
          this.hArr.push({
            min: total,
            max: total + h,
            title: item.name
          })
          total += h
        })
      }, 200)
    },
    // 选择左侧菜单
    handleSelectMenu (name) {
      this.active = name
      // 右侧商品滚动到指定位置
      this.bs2.scrollToElement(document.getElementById(name), 300)
    },
    // 显示商品详情弹层
    handleShowGoodInfo (item) {
      this.flag = true // 显示弹层
      this.info = item // 保存商品详情数据
    },
    // 隐藏商品详情弹层
    handleCloseMask () {
      this.flag = false
    }
  },
}
</script>

<style lang="less" scoped>
#goods {
  display: flex;
  .left-menu {
    flex: 0 0 120px;
    overflow-y: auto;
    .left-menu-item {
      box-sizing: border-box;
      padding: 15px;
      border-bottom: 1px solid #ddd;
      height: 60px;
      line-height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f6f9;
      &.active {
        background-color: #fff;
      }
    }
  }
  .right-content {
    flex: 1;
    background-color: #fff;
    overflow-y: auto;
    .right-content-item {
      .title {
        box-sizing: border-box;
        padding-left: 15px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-weight: 700;
        color: #999;
        background-color: #f2f6f9;
        border-left: 2px solid #999;
      }
      .item {
        position: relative;
        box-sizing: border-box;
        padding: 15px;
        display: flex;
        .img {
          width: 80px;
          height: 80px;
        }
        .info {
          padding-left: 15px;
          line-height: 20px;
          .title {
            font-size: 14px;
            font-weight: 700;
          }
          .desc {
            font-size: 12px;
            color: #ccc;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .rate {
            font-size: 12px;
            color: #ccc;
          }
          .price {
            font-size: 14px;
            font-weight: 700;
            color: red;
          }
        }
        .control {
          position: absolute;
          right: 1px;
          bottom: 12px;
          /deep/.van-stepper__input {
            width: 22px;
          }
          /deep/.van-stepper__minus {
            color: skyblue;
            border: 1px solid skyblue;
          }
          /deep/.van-stepper__plus {
            background-color: skyblue;
          }
        }
      }
    }
  }
  .good-info {
    position: fixed;
    top: 0;
    bottom: 70px;
    left: 0;
    right: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .imgs {
      flex: 1;
    }
    .contentId {
      flex: 1;
      .conter-top {
        position: relative;
        padding: 20px;
        line-height: 28px;
        .name {
          font-size: 20px;
          font-weight: 700;
        }
        .rate {
          color: #d5d5d5;
        }
        .price {
          font-size: 18px;
          margin-top: 20px;
          color: red;
          font-weight: 700;
        }
        .btn {
          position: absolute;
          right: 20px;
          bottom: 20px;
        }
      }
      .blank {
        height: 25px;
        background-color: #f4f5f9;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }
      .conter-botton {
        .above {
          padding: 20px;
          line-height: 24px;
          border-bottom: 1px solid #ccc;
          h3 {
            font-size: 18px;
            font-weight: 700;
          }
          p {
            color: #ccc;
          }
        }
        .under {
          padding: 20px;
          button {
            margin-right: 10px;
            padding: 5px;
          }
        }
      }
    }
    i {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
      color: white;
      background-color: #999;
      padding: 5px;
      border-radius: 50%;
    }
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.3s;
  }
  .slide-enter,
  .slide-leave-to {
    transform: translateY(100%);
  }
}
</style>